﻿@page "/account/user/bind"
@inherits SsoCompontentBase
@layout SimpleLayout
@inject IJSRuntime _js
@inject EnvironmentDataService _environmentData

<MForm Model="UserModel" EnableValidation EnableI18n>
    <MCard Width=510 Height=620 MaxHeight="620" Class="pa-12">
        <div class="mb-12 d-flex flex-column align-center">
            <MAvatar>
                <img src="@UserModel.Avatar" />
            </MAvatar>
            <span class="mt-3">@UserModel.DisplayName</span>
        </div>
        <MTextField @bind-Value="UserModel.PhoneNumber" Class="mt-3" Outlined Label="@T("PhoneNumber")" />
        <MTextField @bind-Value="UserModel.SmsCode" Class="mt-3" Outlined Label="@T("Captcha")">
            <AppendContent>
                <MButton Style="margin-top:-16px;margin-right:-12px;height:54px;min-width: 120px;"
                         Class="primary rounded-r-lg" Disabled="@((_captchaText == "0" || _captchaText == null) is false)" OnClick="()=> SendCaptcha(context)">
                    @CaptchaText
                </MButton>
            </AppendContent>
        </MTextField>
        <div class="d-flex mt-12">
            <MButton Class="rounded-pill text-btn white--text mx-auto" OnClick="() => BindAsync(context)" Height=48 Width=340 Color="primary" Loading=_loginLoading>
                @T("Bind")
            </MButton>
        </div>
    </MCard>
</MForm>